<template>
    <div class="signin-container">
      <el-card shadow="hover" class="box-card">
        <template #header>
          <div class="card-header">
            <span>签到配置管理</span>
            <div>
              <el-button type="primary" :icon="RefreshRight" @click="refreshConfig">刷新</el-button>
            </div>
          </div>
        </template>
        
        <el-form :model="form" label-width="120px">
          <el-form-item label="签到经度">
            <el-input v-model="form.longitude" placeholder="请输入签到经度"></el-input>
          </el-form-item>
          
          <el-form-item label="签到纬度">
            <el-input v-model="form.latitude" placeholder="请输入签到纬度"></el-input>
          </el-form-item>
          
          <el-form-item label="签到范围(米)">
            <el-input-number v-model="form.range" :min="100" :max="5000"></el-input-number>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" :icon="DocumentAdd" @click="saveConfig">保存配置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      
      <!-- 地图弹窗 -->
      <el-dialog v-model="mapDialogVisible" title="签到范围地图" width="80%">
        <div id="map-container" style="height: 500px;"></div>
        <template #footer>
          <el-button @click="mapDialogVisible = false">关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import * as echarts from 'echarts'
  import 'echarts/extension/bmap/bmap'
  import requestUtil, { getServerUrl } from "@/util/request"
  import { DocumentAdd, Tools, RefreshRight } from '@element-plus/icons-vue'
  
  const form = ref({
    longitude: '',
    latitude: '',
    range: 1000
  })
  
  const mapDialogVisible = ref(false)
  
  // 加载配置
  const loadConfig = async () => {
    try {
      const res = await requestUtil.post("sys/config/list")
      if(res.data.code === 200){
        const data = res.data.list
        form.value = {
          longitude: data.find(item => item.name === '签到经度')?.value || '',
          latitude: data.find(item => item.name === '签到纬度')?.value || '',
          range: parseInt(data.find(item => item.name === '签到范围')?.value || '1000')
        }
      }else{
        ElMessage.error(res.data.msg)
      }
    } catch (error) {
      ElMessage.error('加载配置失败: ' + error.message)
    }
  }
  
  // 保存配置
  const saveConfig = async () => {
    try {
      const configs = [
        { id:1, name: '签到经度', value: form.value.longitude },
        { id:2, name: '签到纬度', value: form.value.latitude },
        { id:3, name: '签到范围', value: form.value.range.toString() }
      ]
      
      const res = await requestUtil.post("sys/config/save", configs)
      if(res.data.code === 200){
        ElMessage.success('配置保存成功')
        loadConfig()
      }else{
        ElMessage.error(res.data.msg)
      }
    } catch (error) {
      ElMessage.error('保存配置失败: ' + error.message)
    }
  }
  
  // 刷新配置
  const refreshConfig = () => {
    loadConfig()
    ElMessage.success('配置加载成功')
  }
  
  // 显示地图弹窗
  const showMapDialog = () => {
    mapDialogVisible.value = true
    nextTick(() => {
      initMap()
    })
  }
  
  // 初始化地图
  const initMap = () => {
    const container = document.getElementById('map-container')
    if (!container) return
    
    // 先销毁旧实例
    let chart = echarts.getInstanceByDom(container)
    if (chart) {
      chart.dispose()
    }
    
    chart = echarts.init(container)
    
    // 检查是否有有效的经纬度
    if (!form.value.longitude || !form.value.latitude) {
      chart.setOption({
        title: {
          text: '请先设置签到位置',
          left: 'center',
          top: 'center'
        }
      })
      return
    }
    
    const option = {
      bmap: {
        center: [parseFloat(form.value.longitude), parseFloat(form.value.latitude)],
        zoom: 15,
        roam: true,
        mapStyle: {
          styleJson: [
            {
              featureType: 'water',
              elementType: 'all',
              stylers: {
                color: '#044161'
              }
            },
            {
              featureType: 'land',
              elementType: 'all',
              stylers: {
                color: '#004981'
              }
            }
          ]
        }
      },
      series: [{
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: [[parseFloat(form.value.longitude), parseFloat(form.value.latitude)]],
        symbolSize: 20,
        label: {
          formatter: '签到中心点',
          position: 'right'
        },
        itemStyle: {
          color: '#FF0000'
        }
      }, {
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        data: [[parseFloat(form.value.longitude), parseFloat(form.value.latitude)]],
        symbolSize: 10,
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke',
          scale: form.value.range / 50
        },
        label: {
          formatter: '签到范围: {c}米',
          position: 'right',
          show: true
        },
        itemStyle: {
          color: '#FF0000',
          opacity: 0.8
        }
      }]
    }
    
    chart.setOption(option)
  }
  
  onMounted(() => {
    loadConfig()
  })
  </script>
  
  <style scoped>
  .signin-container {
    padding: 20px;
  }
  
  .box-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>